<template>
  <div class="app">
    <div>
      <itemBox title="学校设备需求TOP5">
        <div class="leftTop" v-for="(item, index) in schoolEquipmentList">
          <div style="width: 39px; text-align: center">{{ item.rank }}</div>
          <div style="width: 70px; text-align: left">{{ item.name }}</div>
          <div class="jindu">
            <div
              class="jindutiao"
              :style="{
                width: item.width + '%',
                backgroundColor: index === 0 ? '#ffb936' : '#00ffff',
              }"
            ></div>
          </div>
          <div>{{ item.num }}</div>
        </div>
      </itemBox>
    </div>
    <div style="margin: 24px 0">
      <itemBox title="全市可调配设备前五" class="mt24">
        <div class="leftCenter" v-for="(item, index) in cityEquipmentList">
          <div class="leftCenter_top">
            <div style="width: 39px; text-align: center" class="rank">
              {{ item.rank }}
            </div>
            <div>{{ item.name }}</div>
            <div class="num">{{ item.num }}</div>
          </div>
          <div class="leftCenter_bottom">
            <div
              class="mmm"
              :style="{
                width: item.width + '%',
                backgroundColor: index === 0 ? '#00ffff' : '#3b9df7',
              }"
            ></div>
          </div>
        </div>
      </itemBox>
    </div>
    <div class="leftBottom">
      <itemBox2 title="装备预算计划执行进度">
        <div class="leftBottom_top">
          <div style="margin-right: 20px">
            执行进度： <span class="textColor">4000 </span>万
          </div>
          <div class="textColor">40%</div>
          <div style="margin-left: auto">
            总预算： <span class="textColor">10000 </span>万
          </div>
        </div>
        <div class="leftBottom_bottom">
          <div class="ccc"></div>
        </div>
      </itemBox2>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import countTo from "vue-count-to";
import pageTitle from "../../components/pageTitle";
import itemBox from "./itemBox.vue";
import itemBox2 from "./itemBox2.vue";
import subTit from "../../components/subTit";

let mixin = new drawMixin();
export default {
  name: "index",
  components: { countTo, pageTitle, itemBox, subTit, itemBox2 },
  mixins: [mixin],
  data() {
    return {
      schoolEquipmentList: [
        {
          rank: "NO.1",
          name: "图书",
          width: "80",
          num: "15367本",
        },
        {
          rank: "NO.2",
          name: "课桌椅",
          width: "70",
          num: "6522套",
        },
        {
          rank: "NO.3",
          name: "护眼灯",
          width: "60",
          num: "5340台",
        },
        {
          rank: "04",
          name: "计算机",
          width: "50",
          num: "5233台",
        },
        {
          rank: "05",
          name: "空调",
          width: "40",
          num: "4322台",
        },
      ],
      cityEquipmentList: [
        {
          rank: "NO.1",
          name: "图书",
          width: "80",
          num: "60872本",
        },
        {
          rank: "NO.2",
          name: "计算机",
          width: "70",
          num: "1038台",
        },
        {
          rank: "NO.3",
          name: "多媒体",
          width: "60",
          num: "892套",
        },
        {
          rank: "04",
          name: "空调",
          width: "50",
          num: "863台",
        },
        {
          rank: "05",
          name: "护眼灯",
          width: "40",
          num: "532台",
        },
      ],
    };
  },
  mounted() {},

  methods: {},
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: "LESLIE";
  src: url("~@/assets/food/LESLIEB.TTF");
}

.app {
  width: 100%;
  height: 100%;

  .leftTop {
    color: #fff;
    opacity: 0.85;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 436px;
    height: 56px;
    background-color: rgba($color: #077cdc, $alpha: 0.12);
    margin-bottom: 2px;
    .jindu {
      width: 218px;
      height: 12px;
      background-color: rgba($color: #077cdc, $alpha: 0.12);
      display: flex;
      align-items: center;
      .jindutiao {
        width: 80%;
        height: 6px;
        background: #ffb936;
      }
    }
  }

  .leftCenter {
    margin-bottom: 11px;
    opacity: 0.85;
    .leftCenter_top {
      display: flex;
      margin: 7px 16px 18px;
      .rank {
        margin-right: 12px;
      }
      .num {
        margin-left: auto;
      }
    }
    .leftCenter_bottom {
      margin-left: 68px;
      width: 352px;
      height: 8px;
      background-color: rgba($color: #077cdc, $alpha: 0.12);
      .mmm {
        width: 80%;
        height: 6px;
        background: #00ffff;
      }
    }
  }
  .leftBottom {
    .leftBottom_top {
      display: flex;
      margin: 8px 0 10px;
      .textColor {
        font-size: 20px;
        color: #00fffa;
      }
    }
    .leftBottom_bottom {
      display: flex;
      align-items: center;
      width: 436px;
      height: 20px;
      background: rgba(216, 216, 216, 0);
      border: 1px solid rgba(59, 157, 247, 0.5);
      border-radius: 12px;
      .ccc {
        margin-left: 3px;
        width: 268px;
        height: 12px;
        background-image: linear-gradient(270deg, #00fffa 0%, #3b9df7 50%);
        border-radius: 9px;
      }
    }
  }
}
</style>
